<!doctype html>
<html lang="zh" xmlns:th="https://www.thymeleaf.org">


<head>
    <meta charset="UTF-8">
    <title>收货地址管理</title>
</head>
<body>

<div class="wrapper">


        <div class="container-fluid">
            <div class="iq-card">
                <div class="iq-card-header d-flex justify-content-between">
                    <div class="iq-header-title">
                        <h4 class="card-title">收货地址管理</h4>
                    </div>
                </div>
                <div class="iq-card-body">
                    <div class="selbox">
                        <!-- name="searchForm"根据name获取form的DOM对象。
                    th:action 指定form表单提交时请求的目标地址（最终会找到对应的控制器方法并执行）
                    method="get"指定请求方式，可以不用显式指定，因为默认为GET请求-->
                        <form name="searchForm" th:action="@{/user/address}" method="get">
                            <!--                        用于用户点击分页导航按钮时，保存要查看的页码数，封装到查询条件中-->
                            <input type="hidden" name="page" id="page" value="1">
                            <div class="form1">
                                <ul class="row">
                                    <li class="col-xs-4">
                                        <span>用户名称：</span>
                                        <!--为查询条件添加name属性-->
                                        <input type="text" name="userName" class="form-control" th:value="${userAddress.userName}">
                                    </li>


                                    <li class="col-xs-4" style="padding-left: 10px">
                                        <!--                                    为按钮添加click，并指定触发的两数，这里的1代表请求的页数，分页时会用到-->
                                        <a href="javascript:;" class="btn btn-primary" onclick="toSearch(1)">查询</a>
                                        <a href="javascript:;" class="btn btn-default">重置</a>
                                        <a th:href="@{/user/address/0}" class="btn btn-bg-gradient-x-purple-red">添加配送地址</a>
                                    </li>
                                </ul>
                            </div>
                        </form>
                        <div>
                            <table class="table">
                                <thead>
                                <tr>
                                    <th  >序号</th>
                                    <th  >姓名</th>
                                    <th >电话</th>
                                    <th  >省</th>
                                    <th  >市</th>
                                    <th  >区</th>
                                    <th >详细地址</th>
                                    <th >操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                <!-- 此处对后端查询到的集合进行渲染，使用 th:each 属性，
                                 userAddress 是遍历出来的每个科室元素，
                                stat 是 Thymeleaf 提供的内置对象——状态变量，
                                 userAddressList 是需要遍历的目标对象，即服务器查询到的数据；-->

                                <tr th:each="userAddress,stat : ${userAddressList}">
                                    <td th:text="${stat.count}"></td>
                                    <td th:text="${userAddress.userName}">姓名</td>
                                    <td th:text="${userAddress.userTel}">电话</td>
                                    <td th:text="${userAddress.userProvince}">省</td>
                                    <td th:text="${userAddress.userCity}">市</td>
                                    <td th:text="${userAddress.userDistrict}">区</td>
                                    <td th:title="${userAddress.userAddress}" th:text="${#strings.abbreviate(userAddress.userAddress,15)}">详细地址</td>

                                    <td>
                                        <span>
                                            <a th:href="@{/user/address/{id}(id=${userAddress.addressId})}">
                                                <img th:src="@{/images/xiugai.png}" title="修改">
                                            </a>
                                        </span>
                                        <span>
                                            <a href="#" th:onclick="'del('+${userAddress.addressId}+')'">
                                                <img th:src="@{/images/schu.png}" title="删除">
                                            </a>
                                        </span>
                                    </td>
                                </tr>
                                </tbody>
                            </table>



<!--                            <nav aria-label="Page navigation" class="page">-->
<!--                                <ul class="pagination">-->
<!--                                    <li class="page-item">-->
<!--                                        <a>-->
<!--                                            <span th:text="${'共&nbsp; '+ pageInfo.total +'&nbsp;条记录&nbsp;&nbsp;&nbsp;'+ pageInfo.pageNum + ' / '+pageInfo.pages+' 页&nbsp;&nbsp;&nbsp;&nbsp;'}"></span>-->
<!--                                        </a>-->
<!--                                    </li>-->

<!--                                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">-->
<!--                                        <a class="page-link" href="javascript:;" aria-label="Previous" th:onclick="'toSearch(1)'">-->
<!--                                            <span aria-hidden="true">首页</span>-->
<!--                                        </a>-->
<!--                                    </li>-->

<!--                                    <li class="page-item" th:if="${pageInfo.hasPreviousPage}">-->
<!--                                        <a class="page-link" href="javascript:;" aria-label="Previous" th:onclick="'toSearch('+${pageInfo.prePage}+')'">-->
<!--                                            <span aria-hidden="true">上一页</span>-->
<!--                                        </a>-->
<!--                                    </li>-->

<!--                                    &lt;!&ndash;页码区1、2、3、4、5...&ndash;&gt;-->
<!--                                    <li th:class="'page-item'+${nav == pageInfo.pageNum ? 'active' : ''}" th:each="nav :${pageInfo.navigatepageNums}">-->
<!--                                        <a class="page-link" href="javascript:;" th:text="${nav}" th:onclick="'toSearch('+${nav}+')'">1</a>-->
<!--                                    </li>-->

<!--                                    <li class="page-item" th:if="${pageInfo.hasNextPage}">-->
<!--                                        <a class="page-link" href="javascript:;" aria-label="Next" th:onclick="'toSearch('+${pageInfo.nextPage}+')'">-->
<!--                                            <span aria-hidden="true">下一页</span>-->
<!--                                        </a>-->
<!--                                    </li>-->

<!--                                    <li class="page-item" th:if="${pageInfo.hasNextPage}">-->
<!--                                        <a class="page-link" href="javascript:;" aria-label="Next" th:onclick="'toSearch('+${pageInfo.pages}+')'">-->
<!--                                            <span aria-hidden="true">尾页</span>-->
<!--                                        </a>-->
<!--                                    </li>-->

<!--                                </ul>-->
<!--                            </nav>-->
                        </div>
                    </div>
                </div>
                <!-- Footer END -->
            </div>
        </div>
    </div>
</div>
<script ></script>
<script>
    lay('#version').html('-v' + laydate.v);
    laydate.render({
        elem: '#date'
        , range: true
        , theme: '#2c9eae'
    });
    //num要去第几页
    function toSearch(num) {
        //根据name获取form表单DOM对象，这里searchForm需要与form表单中的name属性指定的名称一样
        var form = $("form[name=searchForm]");
        //通过ID选择器，获取到page DOM对象，并为其赋值
        $('#page').val(num);
        form.submit();

    }
</script>
</body>
</html>
